{% extends 'home/public/base.html' %}


{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/css/cart-app.css">

{% endblock %}

{% block con %}
<div class="navbar-left" style="position: absolute;top:25px;left: 150px;z-index: 999;">
    <ol class="breadcrumb" style="background-color: #fff">
        <li>购物车</li>
        <li style="color:red">确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>

<div class="mainbody cart" style="padding-top: 100px;">
            <div class="row">
                <div class="container">
                    <h3 style="margin-bottom: 20px">收货信息:<small><a href="#" data-toggle="modal" data-target="#myModal" style="text-decoration: none;">&nbsp;&nbsp;&nbsp;&nbsp;添加新地址</a></small></h3>
                    
                {% for v in cartlist.0.uid.address_set.all %}
                    <div class="col-sm-6 col-md-3 address">
                        <div class="thumbnail" style=" {% if v.isSelect == 1 %} border:1px dashed red;{% endif %}min-height: 160px;">
                          <div class="caption">
                            <address>
                                <strong>收货人:<span>{{ v.name }}</span></strong><br>
                                <abbr title="address">地址:</abbr>
                                <span>{{ v.address }}</span>
                                <br>
                                <abbr title="phone">电话:</abbr> 
                                <span>{{ v.phone }}</span>
                            </address>
                            <p>
                                {% if v.isSelect == 1 %} 
                                    <a href="#" class="btn btn-danger select" aid="{{ v.id }}" role="button" style="position: absolute;bottom:30px;">
                                    默认地址</a>
                                {% else %} 
                                     <a href="javascript:void(0)" aid="{{ v.id }}" class="btn btn-primary setselect" role="button" style="position: absolute;bottom:30px;">设为默认</a> 
                                {% endif %}
                            </p>
                          </div>
                        </div>
                    </div>
                {% endfor %}


                </div>
            </div>
            <!-- 模态框 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                    </div>
                    <form role="form" action="{% url 'myhome_addressinsert' %}" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="ids" value="{{ request.GET.ids }}">
                        <div class="modal-body">
                          <div class="row">
                            <div class="col-md-10 col-md-offset-1">
                                <div class="form-group">
                                  <label for="exampleInputEmail1">收货人</label>
                                  <input type="text" class="form-control" name="name">
                                </div>
                                <div class="form-group">
                                  <label for="exampleInputEmail1">收货电话</label>
                                  <input type="text" class="form-control" name="phone">
                                </div>
                                <div class="form-group">
                                  <label for="exampleInputEmail1">收货地址</label>
                                  <input type="text" class="form-control" name="address">
                                </div>
                            </div>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                          <button  class="btn btn-primary">添加</button>
                        </div>
                    </form>
                  </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

            <div class="row">
                <div class="container">
                    <h3>商品列表</h3>
                    <!-- 购物车详情头 -->
                    <table class="cart-header">
                        <tbody>
                            <tr>
                                <td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
                                    商品缩略图
                                </td>
                                <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
                                <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
                                <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
                                <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
                            </tr>
                        </tbody>
                    </table><!-- 购物车详情头 E-->
                    
                    <!-- 购物清单信息列表 -->
                    <div class="cart-merchant-list">
                        <div class="cart-merchant">
                            <table class="cart-merchant-body">
                                <tbody>
                                {% for v in cartlist %}
                                    <tr class="cart-product">
                                        <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">  
                                            <a href="meilanx.html" class="cart-product-link" target="_blank">
                                                <img src="{{ v.gid.pic }}" class="cart-product-img" alt="魅蓝 X">
                                            </a>
                                        </td>
                                        <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                                            <a href="{% url 'myhome_info' v.gid.id %}" class="cart-product-link" target="_blank">
                                              <p>{{ v.gid.title }}</p>
                                             
                                            </a>
                                         
                                            
                                        </td>
                                        <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                                            <p>
                                                <span class="cart-product-price">{{ v.gid.price }}</span>
                                            </p>
                                        </td>
                                        <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                                            <div class="cart-product-number-adder">
                                                <p class="cart-product-number-max show"></p>
                                                        {{ v.num }}
                                            </div>
                                        </td>
                                        {% load pagetag %}
                                        <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                            <span class="cart-product-price total">{% cheng v.num v.gid.price %}</span>
                                        </td>
                                  
                                    </tr>
                                {% endfor %}
                              
                                </tbody>
                            </table>
                        </div>
                    </div><!-- 购物清单信息列表 E-->
                </div>
            </div>

        
        <!-- 结算详情 -->
        <div class="cart-footer" id="cartFooter">
            <div class="container">
               <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
                
                   <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
                   <span class="cart-footer-count">
                        共
                        <span class="cart-footer-num" id="totalCount">0</span>
                        件商品
                   </span>
                </div>
                <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
                    <span class="cart-footer-sum">
                        <span class="cart-footer-text">已优惠</span>
                        <span class="cart-footer-num red" id="totalDiscount">0.00</span>
                        <span class="cart-footer-text">元， 合计(不含运费)：</span>
                        <span class="cart-footer-total" id="totalPrice" style="display: inline-block;width: 60px"> 0</span>
                    </span>
                    <form action="{% url 'myhome_orderinsert' %}" method="post" style="display: inline-block;">
                        {% csrf_token %}
                        <input type="hidden" name="ids" value="{{ request.GET.ids }}">
                        <input type="hidden" name="addressid" value="">
                        <div class="mz-btn success" id="cartSubmit" style="position: relative;left: 70px">去支付</div>
                    </form>
                </div>
            </div>
        </div><!-- 结算详情 E-->
    </div>
<script type="text/javascript">
    // 获取默认地址.设置到隐藏域中
    $('input[name=addressid]').val($('.address .select').attr('aid'))

    // 选择收货地址
    $('.address').click(function(){
        // 给当前的点击的元素设置 边框
        $(this).find('.thumbnail').css('border','1px dashed red')
        // 移除其它元素的 css样式
        $(this).siblings().each(function(){
            $(this).find('.thumbnail').css('border','1px solid #ddd')
        })

        $('input[name=addressid]').val($(this).find('a').attr('aid'))
    })

    // 设为默认地址
    $('.setselect').click(function(){
        // 获取当前地址的id号
        var aid = $(this).attr('aid')
        // 发送ajax修改数据
        $.get('{% url "myhome_addressset"%}',{'aid':aid},function(data){
            location.href=location.href;
        })
    })

    // 去支付的提交事件
    $('#cartSubmit').click(function(){
        // 检测是否有收货地址
        if(!$('input[name=addressid]').val()){
            alert('请选择收货地址');
            return false;
        }
        $(this).parents('form').submit()
    })

</script>

{% endblock %}